<template>
  <div class="card art-custom-card">
    <div class="card-header">
      <div class="title">
        <h4 class="box-title">浏览量</h4>
        <p class="subtitle">浏览趋势</p>
      </div>
    </div>
    <div class="chart" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { hexToRgba, getCssVar } from '@/utils/ui'
import { EChartsOption } from 'echarts'
import { useChart } from '@/composables/useChart'

const {
  chartRef,
  isDark,
  initChart,
  updateChart,
  getAxisLabelStyle,
  getAxisLineStyle,
  getAxisTickStyle,
  getSplitLineStyle
} = useChart()

const props = defineProps({
  userSessions: {
    type: Object,
    default: {}
  }
})

// 定义真实数据
const realData = (props.userSessions.aoList || []).map((e: any) => e.data)

// 初始化动画函数
const initChartWithAnimation = () => {
  // 首先初始化图表，数据为0
  initChart(options(true))
  updateChart(options(false))
}

watch(isDark, () => {
  initChart(options())
})

onMounted(() => {
  initChartWithAnimation()
})

const options: (isInitial?: boolean) => EChartsOption = (isInitial) => {
  const isInit = isInitial || false
  return {
    // 添加动画配置
    animation: true,
    animationDuration: 0,
    animationDurationUpdate: 0,
    grid: {
      left: '2.2%',
      right: '3%',
      bottom: '0%',
      top: '10px',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: (props.userSessions.aoList || []).map((e: any) => e.statDate.slice(5, 10)),
      axisTick: getAxisTickStyle(),
      axisLabel: getAxisLabelStyle(true),
      axisLine: getAxisLineStyle(true)
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: realData.reduce((prev: number, curr: number) => Math.max(prev, curr), 0),
      axisLabel: getAxisLabelStyle(true),
      axisLine: getAxisLineStyle(!isDark.value),
      splitLine: getSplitLineStyle(true)
    },
    series: [
      {
        name: '浏览',
        color: getCssVar('--main-color'),
        type: 'line',
        stack: '总量',
        data: isInit ? new Array(12).fill(0) : realData,
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2.2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: hexToRgba(getCssVar('--el-color-primary'), 0.15).rgba
            },
            {
              offset: 1,
              color: hexToRgba(getCssVar('--el-color-primary'), 0.01).rgba
            }
          ])
        },
        animationDuration: 0,
        animationDurationUpdate: 1500
      }
    ]
  }
}
</script>

<style lang="scss" scoped>
.card {
  box-sizing: border-box;
  width: 100%;
  height: 420px;
  padding: 20px 0 30px;

  .card-header {
    padding: 0 18px !important;
  }

  .chart {
    width: 100%;
    height: calc(100% - 80px);
    margin-top: 30px;
  }
}
</style>
